<template>
  <div class="container">
    <h2>基础柱状图-渐变</h2>
    <div class="chart-container">
      <div id="multipleYAxes" style="height:500px"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "basicBar",
  data() {
    return {
      option: {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#f48107",
                  },
                  {
                    offset: 1,
                    color: "#f745f3",
                  },
                ],
                globalCoord: false,
              },
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.getLineChart();
  },
  methods: {
    // 设置折线图
    getLineChart() {
      this.lineChart = this.$echart.init(
        document.getElementById("multipleYAxes")
      );
      this.lineChart.setOption(this.option);
    },
  },
};
</script>

<style lang="less">
.chart-container {
  canvas {
    // width: 200px !important;
  }
}
</style>